<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="tabsIndex" @tab-click="changeTab" v-loading="loading">
      <el-tab-pane v-for="(tabItem, tabIndex) in tabList" :key="tabItem.name" :label="tabItem.label">
        <div style="margin-bottom: 20px">
          <div>
            <!--            <span>选择标签：</span>-->
            <el-select style="width: 80%;margin-bottom: 10px;" v-model="tabItem.selectValue" multiple filterable
                       placeholder="请选择标签" @change="chooseTag" @remove-tag="removeTag(tabItem.selectValue)">
              <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
            </el-select>
          </div>
          <el-tag v-for="tag in tabItem.dynamicTags" :key="tag.id" :disable-transitions="false">
            {{ tag.tagName }}
          </el-tag>
        </div>
        <div v-if="tabItem.selectValue && tabItem.selectValue.length>0">
          <image-upload v-model="tabItem.imgList" :isShowTip="false" :limit="limitNum"/>
          <div style="margin-top: 10px">
            <el-button type="primary" size="small" @click="submitImgList(tabItem)">确定</el-button>
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
    <el-dialog title="编辑标签" :visible.sync="isEditTabsName" width="350px">
      <el-form ref="form" :rules="rules" :model="form">
        <el-form-item label="标签名:" prop="ableTabsName">
          <el-input size="small" style="width: 70%" v-model="form.ableTabsName" placeholder="请输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditTabsName = false">取 消</el-button>
        <!-- <el-button type="primary" @click="addTab" :loading="addTabLoading">
          确 定
        </el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTagList,
  addProductAtlas,
  getAtlasList
} from '@/api/picture/picture'

export default {
  name: "atlas",
  data() {
    return {
      isDisabled: true,
      loading: false,
      tagList: [],
      value1: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      isEditTabsName: false,
      tabsIndex: 0, // tab选项卡的name
      addTabLoading: false,
      form: {
        ableTabsName: "",
      },
      tabList: [{
        label: "轮播图", // 标签名称
        name: "0", //标签唯一值
        dynamicTags: [], // 标签列表
        imgList: [],
        selectValue: []
      },
        // {
        //   label: "",
        //   name: "1",
        //   dynamicTags: [],
        //   imgList: [],
        //   selectValue: []
        // },
        {
          label: "详情图",
          name: "2",
          dynamicTags: [],
          imgList: [],
          selectValue: []
        },
      ], // 选项卡列表
      rules: {
        ableTabsName: [{
          required: true,
          message: "标签名称不能为空",
          trigger: "blur"
        },],
      }, // 表单验证规则
      limitNum: 1,//上传图片数量限制
    };
  },
  created() {
    this.getTagList()
  },
  methods: {
    // // 上传图片前的判断
    // updateImg(e) {
    //   if (e && e.length > 0) {
    //     this.isDisabled = false
    //   } else {
    //     this.isDisabled = true
    //     this.$message.error('请先选择标签')
    //     return
    //   }
    // },
    // 删除标签
    removeTag(e) {
      if (e && e.length > 0) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
    },
    // 选择标签
    chooseTag(e) {
      if (e && e.length > 0) {
        this.limitNum = 100 / e.length
      }
      this.removeTag(e)
      let list = this.tagList.filter(item => e.indexOf(item.id) > -1)
      for (let i = 0; i < this.tabList.length; i++) {
        if (i == this.tabsIndex) {
          this.tabList[i].dynamicTags = list
        }
      }
    },
    // 获取标签列表
    getTagList() {
      getTagList(this.queryParams).then(response => {
        this.tagList = response.data
      });
    },

    changeTab(e) {
      // this.tabIndex = e.name;
      this.tabList[this.tabsIndex].selectValue = []
      this.tabList[this.tabsIndex].dynamicTags = []
      this.isDisabled = true
      // this.updateImg('')
      // this.editableTabs = 0;
    },
    // 打开编辑标签弹窗
    openEditTargetNameModal() {
      this.form = {
        ableTabsName: "",
      };
      this.isEditTabsName = true;
    },
    // 提交图片
    submitImgList(item) {
      this.loading = true
      if (item.dynamicTags && item.dynamicTags.length < 1) {
        this.$message.error("请选择标签")
        return
      }
      if (item.imgList && item.imgList.length < 1) {
        this.$message.error("请选上传图片")
        return
      }
      let urlList = [], tagList = [];
      urlList = item.imgList.split(";")
      for (let i = 0; i < item.dynamicTags.length; i++) {
        tagList.push(item.dynamicTags[i].id)
      }
      let data = {
        atlasType: this.tabsIndex,
        tagList: tagList,
        pictureUrlList: urlList
      }
      addProductAtlas(data).then(response => {
        this.$message.success(response.msg)
        this.tabList = [{
          label: "轮播图", // 标签名称
          name: "0", //标签唯一值
          dynamicTags: [], // 标签列表
          imgList: [],
          selectValue: []
        }, {
          label: "详情图",
          name: "2",
          dynamicTags: [],
          imgList: [],
          selectValue: []
        }]
        this.loading = false
      })
    },
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
